<style>

.pieChart{
    border-width:0;
    margin:10px 0;
    padding:0;
    height:200px;
    width:100%;
}
.pieDiv{
    float: left;
    width: 32%;
    height:200px;
    border: 1px solid #DFE4E8;

}

.pieDiv h1{
    text-align:left;
    line-height:26px;
    padding-left:5px;
}
.pieDiv.third{
    margin-left:1.6%;
}
.pieDiv.second{
    margin-left:1.6%;
}

.pieHead{
    height:30px;
    border-bottom: 1px solid #DFE4E8;
}

.pieBody{
    height:168px;
    width:98%;
}

#tabs{
    float:left;
    margin:10px 0;
    padding:0;
    width:100%;
    border-bottom:1px solid #DFE4E8;
}

.lineDiv{
    margin:0 auto;
    height:300px;
    overflow:hidden;
}

#panel .panelHeader{
    border-left:0px;
}

</style>
<script src="${rc.getContextPath()}/manage/js/echarts/echarts.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        $("input[name='inspect_workCenterCode']",navTab.getCurrentPanel()).click(function(){
            var $this = $(this);
            var checked = $this.attr("checked");
            if(!checked){
                $("input[name='inspect_workCenterCodeStr']",navTab.getCurrentPanel()).attr("checked", false);
            }else{
                var allChecked = true;
                $("input[name='inspect_workCenterCode']",navTab.getCurrentPanel()).each(function(){
                    if(!$(this).attr("checked")){
                        allChecked =  false;
                    }
                });
                if(allChecked) $("input[name='inspect_workCenterCodeStr']",navTab.getCurrentPanel()).attr("checked", true);
            }
            reloadConfirmDetail();
        });
        
        $("input[name='inspect_workCenterCodeStr']", navTab.getCurrentPanel()).click(function(){
            var $trigger = $(this);
            var group = $trigger.attr("group");
            if ($trigger.is(":checkbox")) {
                var type = $trigger.is(":checked") ? "all" : "none";
                if (group) $.checkbox.select(group, type, navTab.getCurrentPanel());
                if(type=="all")
                    reloadConfirmDetail();
            }
        })
        
    })
    function reloadConfirmDetail() {
        var workCenterStr = "";
        var allChecked = $("input[name='inspect_workCenterCodeStr']",navTab.getCurrentPanel()).attr("checked");
        if(allChecked){
            workCenterStr = "-1";
        }else{
            $("input[name='inspect_workCenterCode']",navTab.getCurrentPanel()).each(function(){
                if($(this).attr("checked")){
                    workCenterStr += ",'"+$(this).val()+"'";
                } 
            })
        }
        //不为空再刷新
        if(workCenterStr!=""){
            
            if(workCenterStr!="-1")
                workCenterStr = workCenterStr.substring(1);
            var productionNum = $("input[name='productionNum']").val();
            $("div#archives_inspect", navTab.getCurrentPanel()).loadUrl(hostUrl+"/inspectRecord/inspectNoWorkCenter", {'workCenterCodeStr':workCenterStr, 'productionNum':productionNum});
            
            showInspectPieByType("defectLevel",color1,defectLevelPie, {'workCenterCodeStr':workCenterStr, 'productionNum':productionNum});
            
            showInspectPieByType("defectType",color2,defectTypePie, {'workCenterCodeStr':workCenterStr, 'productionNum':productionNum});
            
            showInspectPieByType("responsibilityType",color3,responsibilityTypePie, {'workCenterCodeStr':workCenterStr, 'productionNum':productionNum});
        }
    }
</script>
<div id="wokeCenters" style="height: 50px;">
    <fieldset>
        <legend><@label key='workCenter.C'>工作中心</@label></legend>
        <dl style="text-align: left;">
            <input type="checkbox" name="inspect_workCenterCodeStr" checked group="inspect_workCenterCode"  value="-1"/> <@label key="all.C">所有</@label>
            <#if workCenters??>
                <#list workCenters as workCenter>
                    <input type="checkbox" name="inspect_workCenterCode" checked value="${workCenter.workCenterCode!''}" />${workCenter.workCenterText!''}
                </#list>
            </#if>
        </dl>
    </fieldset>
</div>
<div id="archives_defectPic" style="float:left;width:100%;height: 210px;">
    <div class="pieChart" >
        <div class="pieDiv first" >
            <div class="pieHead"><h1><@label key="defectLevel.C">缺陷等级</@label></h1></div>    
            <div class="pieBody" id="defectLevelPie"></div>    
        </div>
        <div class="pieDiv second" >
            <div class="pieHead"><h1><@label key="defectType.C">缺陷类型</@label></h1></div>    
            <div class="pieBody" id="defectTypePie"></div>    
        </div>
        <div class="pieDiv third" >
            <div class="pieHead"><h1><@label key="responsibilityType.C">责任类型</@label></h1></div>    
            <div class="pieBody" id="responsibilityTypePie"></div>    
        </div>
    </div>
</div>
<div id="archives_inspect" style="float:left;width:100%;border: 1px #d8dfe5 solid;border-top: 0px;">
<#include "/common/pagerForm.html">
<form rel="pagerForm" method="post" action="${rc.getContextPath()}/manage/inspectRecord/inspectNoWorkCenter" onsubmit="return  dwzSearch(this, 'dialog');">
<input type="hidden" name="productionNum" value="<#if condition??>${condition.productionNum!''}</#if>" />
<input type="hidden" name="workCenterCodeStr" value="<#if condition??>${condition.workCenterCodeStr!''}</#if>" />
<div class="panelBar">
    <ul class="toolBar">
        <li style="margin-top: 8px;"><h1 style="text-align:left;">过程检验信息</h1></li>
    </ul>
</div>
<table class="table" layoutH="425">
    <thead>
        <tr>
            <th width="30"><@label key="serialNumber.C">序号</@label></th>
            <th width="100" ><@label key="defectCode.C">缺陷编号</@label></th>
            <th width="100" ><@label key="defectText.C,name.C">缺陷描述</@label></th>
            <th width="100" ><@label key="defectLevelText.C">缺陷等级描述</@label></th>
            <th width="100" ><@label key="responsibilityTypeText.C">责任类型描述</@label></th>
            <th width="80"><@label key="defectType.C">缺陷类型：</@label></th>
            <th width="100"><@label key='inspectUser.C'>检验人员：</@label></th>
            <th width="100"><@label key='inspectDateTime.C'>检验时间：</@label></th>
            <th width="100" ><@label key="qmOperation.C,code.C">质检工序编号</@label></th>
            <th width="100" ><@label key="qmOperation.C,name.C">质检工序名称</@label></th>
            <th width="100"><@label key="workCenterCode.C">工作中心</@label></th>
            <th width="100"><@label key="workUnit.C">作业单元</@label></th>
            <th width="50" ><@label key="defectDefine.C,quantity.C">缺陷数量</@label></th>
        </tr>
    </thead>
    <tbody>
        <#if page?? && (page.data?size>0)>
            <#list page.data as inspect>
                <#assign defect = inspect.defect />
                <tr>
                    <td>${page.startRow + inspect_index}</td>
                    <td>${inspect.defectCode!''}</td>
                    <td>${inspect.defectText!''}</td>
                    <td>${defect.defectLevelText!''}</td>
                    <td>${defect.responsibilityTypeText!''}</td>
                    <td>${defect.defectTypeText!''}</td>
                    <td>${inspect.createUser!''}</td>
                    <td>${(inspect.createDateTime?string("yyyy-MM-dd HH:mm:ss"))?if_exists}</td>
                    <td>${inspect.operationCode!''}</td>
                    <td>${inspect.operationText!''}</td>
                    <td>${inspect.workcenterText!''}</td>
                    <td>${inspect.workunitText!''}</td>
                    <td>${inspect.quantity!''}</td>
                </tr>
            </#list>
        </#if>
    </tbody>
</table>
<div class="panelBar" style="border-width: 1px;">
        <#if page??>
        <div class="pages">
            <span ><@label key="pagePanelShow.C">显示</@label></span> <select class="combox" name="numPerPage"
                onchange="navTabPageBreak({numPerPage:this.value},'archives_inspect')"> <#list
                [10,20,30,50,100,200] as page_size> <#if
                (page.numPerPage)==page_size>
                <option value="${page_size}" selected="selected">${page_size}</option>
                <#else>
                <option value="${page_size}">${page_size}</option> </#if> </#list>
            </select> <span><@label key="pagePanelMiddle.C">共</@label></span><span><#if page.totalCount??>${page.totalCount?c}<@label key="item.C">条</@label></span></#if>
        </div>
    
        <div class="pagination" targetType="navTab" rel="archives_inspect"
            totalCount="<#if page.totalCount??>${page.totalCount?c}</#if>"
            numPerPage="<#if page.numPerPage??>${page.numPerPage?c}</#if>"
            pageNumShown="5"
            currentPage="<#if page.pageNum??>${page.pageNum?c}</#if>"></div>
        </#if>
</div>
</form>
</div>

<script type="text/javascript">
    function showInspectPieByType(type,color,chart, params) {
        $.DWZajax({
            url:"${rc.getContextPath()}/manage/qualityReport/qualityReportForPie?groupType="+type,
            data:params,
            callback:function (data)
            {
                list=data;
                var seriesData=new Array();
                var legendData=new Array();
                $.each(list,function(i,n){
                    seriesData.push({"name":list[i].text,"value":list[i].count});
                });
                $.each(list,function(i,n){
                    legendData.push(list[i].text);
                });
                archives_pieOption.series[0].data=seriesData;
                archives_pieOption.color = color;
                archives_pieOption.legend.data=legendData;
                chart.setOption(archives_pieOption,true);
            }
        });
    }
    var archives_pieOption = { 
        title : {
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'right',
            y : 'center',
            data:[]
        },
        calculable : false,
        series : [
            {
                name:'',
                type:'pie',
                radius : '90%',
                center: ['50%', '50%'],
                data:[],
                itemStyle:{ 
                    normal:{ 
                          label:{ 
                            show: true, 
                            position : 'inner',
                            formatter : function (params) {                         
                                return (params.percent - 0).toFixed(0) + '%'
                              }
                          }, 
                          labelLine :{show:false} 
                        } 
                } 
            }
        ],
        noDataLoadingOption:{
            text :"<@label key='noData.C'>暂无数据</@label>",
            effect : 'whirling',
        }
    };
    var color1 = [ '#d97a80', '#2ec8ca', '#b6a2df', '#5bb0f0', '#ffb880',
                    '#7ad8bf', '#7a9dd8', '#1380ce', '#d89b7a', '#dea2ad' ];
    var color2 = [ '#00acc6', '#4f93b6', '#85a959', '#fba565', '#00aee3',
            '#0084c6', '#fe8463', '#9bca63', '#fad860', '#60c0dd', ];
    var color3 = [ '#f6a248', '#1dcad1', '#1ea1e4', '#54ad45', '#dd7082',
            '#68c359', '#3a8db7', '#e29039', '#50ced3', '#f49cab', ];
    
    var defectLevelPie = null;
    
    var defectTypePie = null;
    
    var responsibilityTypePie = null;
    
    require.config({
         paths : {
                echarts : '${rc.getContextPath()}/manage/js/echarts'
            }
       });
     require(
         [
           'echarts',
           'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
           'echarts/chart/pie'
        ],
        
    function(ec) {
        //饼图
        var $navTab = navTab.getCurrentPanel();
        defectLevelPie = ec.init($('#defectLevelPie', $navTab)[0]);
        defectTypePie = ec.init($('#defectTypePie', $navTab)[0]);
        responsibilityTypePie = ec.init($('#responsibilityTypePie', $navTab)[0]);
        var productionNum = $("input[name='productionNum']").val();
         showInspectPieByType("defectLevel",color1,defectLevelPie, {'workCenterCodeStr':"-1", 'productionNum':productionNum});
        
        showInspectPieByType("defectType",color2,defectTypePie, {'workCenterCodeStr':"-1", 'productionNum':productionNum});
        
        showInspectPieByType("responsibilityType",color3,responsibilityTypePie, {'workCenterCodeStr':"-1", 'productionNum':productionNum});
    })
</script>